<template>
<el-dialog :title="title" v-model="del.show"
  :width="width" destroy-on-close center >
  <slot></slot>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="del.show = false" size="mini">取 消</el-button>
      <el-button type="primary"  size="mini" @click="del.show = false;$emit('mySure')"
        >确 定</el-button
      >
    </span>
  </template>
</el-dialog>
</template>

<script lang="ts">
import { defineComponent } from "@vue/runtime-core"
export default defineComponent({
  data() {
    return {
      title: '删除',
      width: '30%',
      del: {
        show: false,
        id: 0,
      }
    }
  },
  props: {
    myTitle:String,
    myWidth:String,
    myDel: Object
  },
  emits: ['mySure'],
  watch: {
    myDel: {
      deep: true,
      handler(val,oldVal){
        // console.log('child upd change' , val,oldVal);
        this.del = val
      }
    },
    myTitle: {
      immediate: true,
      handler(val,oldVal) {
        // console.log('child title change' , val,oldVal);
        if(val) this.title = val
      }
    },
    myWidth: {
      immediate: true,
      handler(val,oldVal) {
        // console.log('child title change' , val,oldVal);
        if(val) this.width = val
      }
    }
  }
})
</script>